<template>
  <div class="">
    <h3>生命周期函数</h3>
    <h4 id="box" ref="box">{{ msg }}</h4>
    <!-- ref是vue中专门用来获取节点的 -->

    <button @click="num++">num++</button>
    <h1>{{ num }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
      num: 0,
    };
  },
  methods: {},
  components: {},

  beforeCreate() {
    console.log(this.msg);
  },
  //实例创建之前，还不能使用data和methods
  created() {
    console.log(this.msg);
  },
  //实例创建之后，最早的可以使用data和methods的钩子函数
  beforeMount() {
    console.log(document.getElementById("box"));
    console.log(this.$refs.box);
    //this.$refs.xxx 获取节点
  },
  //节点挂载之前
  mounted() {
    console.log(document.getElementById("box"));
    console.log(this.$refs.box);
  },
  //节点挂载之后
  //在mounted的时候整个页面才算完全准备完成，我们可以在这里请求ajax

  // 以上四个是创建阶段的钩子函数

  beforeUpdate() {
    console.log(this.num);
  },
  updated() {
    console.log(this.num);
  },
  //更新指的是页面的更新，也就是数据的更新

  //   以上是更新阶段的两个函数

  beforeDestroy() {},
  //销毁之前 最后一个能使用data和methods的钩子函数
  destroyed() {},
  //销毁阶段的两个钩子函数
};
</script>

<style lang="scss"></style>
